<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    代码来源：https://blog.panda-studio.cn/

    <h2>按钮</h2>
    <button class="btn px-8 py-4 relative text-bulge-primary">
        <span class="icon">⭐️</span>
        <span class="text" style="width: 4em;">发表评论</span>
    </button>
    <h2>暗色按钮</h2>
    <button class="generate -mt-10"><i class="fa-solid fa-cloud-arrow-down"></i> 保存海报</button>
    <h2>分享</h2>
    <span class="share-modal">
        <button class="image">🔍</button>
        <button class="qq">🔍</button>
        <button class="qzone">🔍</button>

        <button class="likes">🔍</button>
    </span>
    <h2>顶部导航栏</h2>
    <div class="nav-top">
        <div class="nav">
            <div class="nav-content container-np flex items-center xxs:flex-wrap xs:flex-wrap">
                <button class="mobile-menu-btn sm:hidden md:hidden lg:hidden xl:hidden flex flex-col justify-center">
                    <div></div>
                    <div></div>
                    <div></div>
                </button>
                <a href="/" class="logo flex items-center"><img src="../img/logo_samsara.svg"></a>
                <div
                    class="menu flex-grow xxs:order-last xs:order-last flex justify-end xxs:justify-start xs:justify-start">
                    <div data-v-8cdb4753="" class="pf_scroller pf_scroller_is_mac flex"><!----><!---->
                        <ul class="menu" data-level="0">
                            <li class="anchor" style="transform: translateX(99px); width: 114px; opacity: 1;"></li>
                            <li class=""><a href="/" class="" target="_self"
                                    label="<i class=&quot;fa-solid fa-house-user&quot; style=&quot;margin-right:6px&quot;></i>博客"><i
                                        class="fa-solid fa-house-user" style="margin-right:6px"></i>博客</a><!----></li>
                            <li class="is-active"><a href="/guestbook/"
                                    class="router-link-active router-link-exact-active" target="_self"
                                    label="<i class=&quot;fa-solid fa-feather&quot; style=&quot;margin-right:6px&quot;></i>留言板"
                                    aria-current="page"><i class="fa-solid fa-feather"
                                        style="margin-right:6px"></i>留言板</a><!----></li>
                            <li class=""><a href="/about-me/" class="" target="_self"
                                    label="<i class=&quot;fa-solid fa-user&quot; style=&quot;margin-right:6px&quot;></i>关于我"><i
                                        class="fa-solid fa-user" style="margin-right:6px"></i>关于我</a><!----></li>
                        </ul>
                        <div class="menu-funcs flex items-center"><span class=""><button
                                    class="nav-search cursor-hand"><i
                                        class="fa-solid fa-magnifying-glass"></i></button></span>
                            <div class="has-nav-top-func-popover nav-login flex items-center px-10"><!---->
                                <div class="name text-embossed ml-3 truncate"><i
                                        class="fa-solid fa-circle-user mr-3"></i>登录 <i
                                        class="fa-solid fa-caret-down fa-2xs"></i></div>
                                <div class="nav-top-func-popover fixed">
                                    <div class="list-item"><i class="fa-solid fa-right-to-bracket mr-3"></i>登录会员</div>
                                    <div class="list-item"><i class="fa-solid fa-user-pen mr-3"></i>注册账号</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><button class="mobile-sidebar-btn md:hidden lg:hidden xl:hidden">
                    <div class="sidebar-icon flex justify-end">
                        <div class="sidebar-icon-sidebar">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>
    <h2>边框</h2>
    <div class="model-wrapper">
        <div class="model">我是内容</div>
    </div>
    <h2>排名</h2>
    <div class="rankings-wrapper relative" style="background-color: rgb(72, 127, 29);">
        <!--背景-->
        <div class="bg absolute inset-0">
            <img class="full absolute" src="../img/Ee5GB6y7DzhvMQPuDnj-Vmnh.jpg">
            <img class="thumbnail absolute bottom-0 right-0" src="../img/Ee5GB6y7DzhvMQPuDnj-Vmnh.jpg">
        </div>
        <div class="container-np px-20 xxs:px-10 xs:px-10 flex items-center card-container is-dark relative">
            <div class="rankings">
                <div class="place-wrapper">
                    <a href="#" class="block first-place flex r-5 relative pr-16 mb-10 active">
                        <span
                            class="block thumbnail-wrapper r-full place-self-end bg-blur flex justify-center flex-shrink-0">
                            <img class="crown absolute" src="../img/8113d099.png">
                            <img class="thumbnail r-full" src="../img/Ee5GB6y7DzhvMQPuDnj-Vmnh.jpg">
                        </span>
                        <span class="flex flex-col justify-center ml-10 xxs:ml-5">
                            <span class="block main-title type-1 truncate">将iPhone备份迁移到群辉Nas · 拯救Mac存储空间

                                asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
                            </span>
                            <span class="block metas text-xs flex gx-5">
                                6666
                            </span>
                        </span>
                        <img class="place absolute" src="../img/873a161a.svg">
                    </a>
                </div>
            </div>
        </div>

    </div>
    <h2>卡片</h2>
    <div class="post-card">
        <div class="post-card-wrapper is-dark"
            style="transform: none; transition: box-shadow 0.35s ease 0s; --default:#727823; --bg:rgba(119,126,52,1); --text-shadow:-1px -1px var(--white-opacity-8), 0.1053em 0.1053em rgba(73,82,0,0.12), 0.1842em 0.1842em 0.1316em rgba(73,82,0,0.12); --image-shadow:rgba(80,90,0,0.15); --control-color:#9ca428;">
            <div class="card card-container is-dark">
                <div class="main-title type-1">
                    <div>WildFields</div>
                    <div>卡通壁纸</div>
                </div>
                <a href="/wildfields_wallpaper" class=""><span class="block img"
                        style="background-image: url(&quot;../img/WildFields_cat.jpg&quot;);"></span></a>
                <div class="highlight" style="transform: translateX(-50%); opacity: 0;"></div>
            </div>
        </div>

    </div>
</body>

</html>